<script setup lang="ts">
import { onMounted, useTemplateRef, onUnmounted, nextTick } from 'vue'
import UserCard from './components/user-card.vue'
import Map from './components/map-card.vue'
import Todo from './components/todo-card.vue'
import * as echarts from 'echarts'

const lineChart = useTemplateRef('lineChart')
const crossChart = useTemplateRef('crossChart')
let lineCharts: echarts.ECharts | null
let crossCharts: echarts.ECharts | null

onMounted(() => {
  window.addEventListener('resize', resize)
})

// 折线面积图
onMounted(async () => {
  // 等待dom更新完成，不然渲染出来的图表宽度和容器宽度不一致
  await nextTick()
  if (!lineChart.value) return
  if (lineCharts) {
    lineCharts.dispose()
  }
  lineCharts = echarts.init(lineChart.value, 'dark')
  // TODO: 最近一周的访问量
  lineCharts.setOption({
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {},
      },
    ],
  })
})

// 堆叠面积图
onMounted(async () => {
  // 等待dom更新完成，不然渲染出来的图表宽度和容器宽度不一致
  await nextTick()
  if (!crossChart.value) return
  if (crossCharts) {
    crossCharts.dispose()
  }
  crossCharts = echarts.init(crossChart.value, 'dark')
  // TODO: 最近一周的访问量
  crossCharts.setOption({
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    legend: {
      data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5'],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: 'Line 1',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)',
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [140, 232, 101, 264, 90, 340, 250],
      },
      {
        name: 'Line 2',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(0, 221, 255)',
            },
            {
              offset: 1,
              color: 'rgb(77, 119, 255)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [120, 282, 111, 234, 220, 340, 310],
      },
      {
        name: 'Line 3',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(55, 162, 255)',
            },
            {
              offset: 1,
              color: 'rgb(116, 21, 219)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [320, 132, 201, 334, 190, 130, 220],
      },
      {
        name: 'Line 4',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 0, 135)',
            },
            {
              offset: 1,
              color: 'rgb(135, 0, 157)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [220, 402, 231, 134, 190, 230, 120],
      },
      {
        name: 'Line 5',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        label: {
          show: true,
          position: 'top',
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 191, 0)',
            },
            {
              offset: 1,
              color: 'rgb(224, 62, 76)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [220, 302, 181, 234, 210, 290, 150],
      },
    ],
  })
})

const resize = () => {
  if (lineCharts) {
    lineCharts.resize()
  }
  if (crossCharts) {
    crossCharts.resize()
  }
}

onUnmounted(() => {
  if (lineCharts) {
    lineCharts.dispose()
  }
  if (crossCharts) {
    crossCharts.dispose()
  }
  window.removeEventListener('resize', resize)
})
</script>

<template>
  <div class="home-view">
    <UserCard />
    <div class="content">
      <Map />
      <Todo />
    </div>
    <div class="charts">
      <div class="chart-line">
        <div ref="lineChart" style="width: 100%; height: 300px"></div>
      </div>
      <div class="chart-line">
        <div ref="crossChart" style="width: 100%; height: 300px"></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home-view {
  width: 100%;
  height: 100%;
  overflow: auto;

  .content {
    margin-top: 20px;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }

  .charts {
    margin-top: 20px;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-radius: 12px;
    // border: 1px solid var(--xfxjLineColor);

    .chart-line {
      width: 50%;
      height: 300px;
      border-radius: 12px;
      overflow: hidden;
    }
  }
}
</style>
